<script lang="ts" setup>
import { ref } from 'vue'
import couponItem from './components/couponItem.vue'
import { getCouponsCnterListApi } from '@/services/home'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import { Toast } from '@/utils/tools'

const rulePopupRef = ref()
const rules = ref()
const list = ref<any>([])
const notReceiveList = ref<any>([])
const receiveList = ref<any>([])
const memberStore = useMemberStore()

/** 触发规则组件 */
const triggerRules = (e: any) => {
  rules.value = e
  rulePopupRef.value.popupOpen()
}
/** 获取 领券中心列表 */
const getCouponsCnterList = async () => {
  const res = await getCouponsCnterListApi({ pageNum: 1, pageSize: 99999 })
  console.log(res)
  list.value = res.data.rows.filter((i: any) => !i.clientId) || []
  notReceiveList.value = res.data.rows.filter((i: any) => !i.clientId) || []
  receiveList.value = res.data.rows.filter((i: any) => i.clientId) || []
}

// 跳转我的优惠券页面 */
const goCoupons = () => {
  uni.navigateTo({ url: '/pagesMy/userCoupon/userCoupon' })
}
onShow(() => {
  if (!memberStore.token) {
    Toast('请先登录')
    setTimeout(() => {
      return uni.switchTab({ url: '/pages/index/index' })
    }, 500)
  }
  getCouponsCnterList()
})
</script>

<template>
  <view class="collarcenter_box">
    <view class="noReceive" v-if="!notReceiveList.length">
      <image
        src="https://yuefanpai.oss-cn-hangzhou.aliyuncs.com/miniapp/nocoupon.png"
      ></image>
      <view class="button" @tap="goCoupons">查看我的优惠券</view>
      <view class="text">无可领券，下次再来哦！</view>
    </view>
    <view v-if="notReceiveList.length">
      <couponItem
        @triggerRules="triggerRules(item)"
        v-for="item in notReceiveList"
        :key="item.id"
        :couponItem="item"
        @refresh="getCouponsCnterList()"
      />
    </view>
    <view v-if="receiveList.length">
      <couponItem
        @triggerRules="triggerRules(item)"
        v-for="item in receiveList"
        :key="item.id"
        :couponItem="item"
        @refresh="getCouponsCnterList()"
      />
    </view>

    <!-- <view v-else class="noData">
      <image class="_img" src="/static/images/coupon.png" mode="aspectFit" />
      <view>敬请期待~</view>
    </view> -->
  </view>

  <BjsRulePopup :rules="rules" ref="rulePopupRef" />
</template>

<style lang="scss">
.collarcenter_box {
  padding-top: 20rpx;
  width: 100%;
  min-height: 100%;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .noData {
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #00000080;
    ._img {
      width: 376rpx;
      height: 246rpx;
      margin-bottom: 48rpx;
    }
  }
  .noReceive {
    width: 100%;
    background: #fff;
    height: 254rpx;
    margin-bottom: 24rpx;
    padding: 20rpx 24rpx;
    position: relative;
    .button {
      position: absolute;
      left: 50%;
      bottom: 46rpx;
      transform: translate3d(-50%, 0, 0);
      width: 400rpx;
      height: 68rpx;
      text-align: center;
      line-height: 68rpx;
      border-radius: 40px;
      background: #ffbd27;
      border-radius: 1px soild #f5b012;
      color: #fff;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
    }
    .text {
      position: absolute;
      width: 100%;
      top: 48rpx;
      left: 0;
      text-align: center;
      color: #333;
      text-align: center;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-weight: 400;
    }
  }
}
</style>
